<script>
import { ref, reactive ,onBeforeUnmount} from "vue";
import { useRouter, useRoute } from "vue-router";
import { getPageJsonData } from "../api/page.js";
import { getCatalogueData } from "../api/liber.js";
import { useStore } from "../store/book";
import { Toast } from 'vant';
export default {
  setup() {
    let router = useRouter(); //实例化路由
    let route = useRoute(); //实例化路由
    const value = ref(4);
    const active = ref(0);
    let data = reactive({
      title: null,
      volumeId: "",
      libers: "",
      books: "",
      bookIntroduction: null,
      bookrack:false,//判断是否入库
      coverImg:null,//封面
      bookName:null,//书名
      bookEnd:"完结",//是否完结
      text: "快速阅读",
      // bookrackText:"加入"
    });

    // 初始化路由传的参数
    data.volumeId = route.query.volumeId;
    data.libers = route.query.libers;
    data.books = route.query.books;
    let params = { book: data.books };
    console.log(params);

    let store = useStore(); //实例化book属性
    let bookindex = store.book.findIndex((item) => item.books == data.books);
    if (bookindex == -1) {//判断是否存在这本书
      store.book.push({
        volumeId: route.query.volumeId,
        libers: route.query.libers,
        books: route.query.books,
        font: "默认",
        fontheigth: 30,
        fontsize: 22,
        bookrack:data.bookrack,//是否加入书库
        coverImg:data.coverImg,//封面
        bookName:data.bookName,//书名
        bookEnd:data.bookEnd,//完结
      });
      console.log("data.bookrack",data.bookrack);
    } else {
      let booklist = store.book[bookindex];
      // 初始化加入书库状态
      data.libers = booklist.libers;
      data.books = booklist.books;
      data.bookrack = booklist.bookrack;//是否加入书库
    }

    getPageJsonData(params).then((item) => {
      //获取书本信息
      data.bookIntroduction = item.data[1].bookIntroduction;
      data.coverImg = item.data[1].bookIntroduction.coverImg
      data.bookName = item.data[1].bookIntroduction.bookName
    });

    // 离开页面时更新菠萝数据
    onBeforeUnmount(()=>{
       // 更新菠萝状态
      let saveindex = store.book.findIndex((item) => item.books == data.books);
      store.book[saveindex].bookrack = data.bookrack; //更新书库
      store.book[saveindex].coverImg = data.coverImg; //更新封面
      store.book[saveindex].bookName = data.bookName; //更新书名
    })


    let liberFun = () => {
      //阅读跳转
      let params = {
        books: data.books,
        libers: "",
      };
      getCatalogueData(params)
        .then((item) => {
          data.volumeId = item.data.volumes[0].volumeId;
          params.libers = item.data.volumes[0].chapters[0].chapterId;
        })
        .then(() => {
          router.push({
            //数据请求完成后跳转
            path: "/liber", //跳转阅读
            query: {
              books: params.books,
              libers: params.libers,
              volumeId: data.volumeId,
            },
          });
        });
    };

    let bookrackFun = () => {//加入书库
    console.log(data.bookrack);
    if(data.bookrack == false){
      data.bookrack = true;
      Toast.success("成功加入书库")
    }else if(data.bookrack == true){
      data.bookrack = false;
      Toast.success("成功移出书库")
    }
    };

    let backBook = ()=>{
      router.push("/shelf")
    }

    let back = () => {
      //返回
      router.back();
      console.log(router);
    };

    return {
      value,
      active,
      data,
      back,
      liberFun,
      bookrackFun,
      backBook,
    };
  },
};
</script>

<template>
  <div class="page_books">
    <div class="container" v-if="data.bookIntroduction">
      <div class="top_book">
        <div class="left" @click="back()">
          <span class="iconfont icon-arrow-left"></span>
        </div>
        <div class="right" @click="backBook">
          <span class="iconfont icon-shuben"></span>
          <span class="font">书架</span>
        </div>
      </div>
      <div class="main_book">
        <div class="image">
          <img :src="data.bookIntroduction.coverImg" alt="" />
        </div>
        <div class="title_box">
          <h3>{{ data.bookIntroduction.bookName }}</h3>
          <p>{{ data.bookIntroduction.authorPenName }}</p>
          <p>连载中 · 274.4万字</p>
        </div>
      </div>
      <div class="white_box">
        <div class="score">
          <div class="score_item">
            <div class="num"><strong>9</strong>分</div>
            <van-rate v-model="value" :count="5" gutter="0px" size="15px" />
          </div>
          <div class="score_item">
            <div class="num"><strong>3.7</strong>万</div>
            <p>近日热度</p>
          </div>
          <div class="score_item">
            <div class="num"><strong>154</strong>人</div>
            <p>一周读者</p>
          </div>
        </div>
        <div class="books">
          <h3>书籍简介</h3>
          <!-- <p>[无敌爽文+女帝+甜宠]</p> -->
          <p>{{ data.bookIntroduction.introduction }}</p>
          <div class="book_item">
            <div class="cont">玄幻</div>
            <div class="cont">系统文</div>
            <div class="cont">扮猪吃虎</div>
          </div>
        </div>
        <div class="cata">
          <h4>查看目录</h4>
          <p>完结 共997章 <span>&gt;</span></p>
        </div>
        <div class="book_review">
          <div class="review">
            <h4>书评 · 1082</h4>
            <p>全部书评<span>&gt;</span></p>
          </div>
          <div class="xing">
            <p>轻点评论</p>
            <van-rate
              v-model="active"
              :count="5"
              gutter="10px"
              void-color="#db856d"
              size="20px"
            />
          </div>
          <div class="pinglun">
            <div class="pin">
              <div class="p_left">
                <div class="image">
                  <img
                    src="https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg"
                    alt=""
                  />
                </div>
                <div class="name">
                  <p>告别黎明</p>
                  <span>11-28</span>
                </div>
              </div>
              <div class="p_right">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div class="yue">
              <van-rate v-model="value" :count="5" gutter="2px" size="10px" />
              <span>阅读17小时点评</span>
            </div>
            <div class="content">
              这男主可以，这是我见过的第四个三观比较正性格比较好的了。内容比较休闲，就感觉在养老的那种感觉。这才是真正的咸鱼生活
            </div>
            <div class="Like">
              <div class="zan">
                <span class="iconfont icon-dianzan"></span>
                <span>赞同</span>
                <span>31</span>
              </div>
              <div class="fan">
                <span class="iconfont icon-24gf-thumbsDown"></span>
                <span>反对</span>
              </div>
            </div>
            <div class="reply">
              <p>爱吃时疏炸酱面的陈猿：<span>求另外书名</span></p>
              <p>爱吃时疏炸酱面的陈猿：<span>求另外书名</span></p>
            </div>
          </div>
          <div class="pinglun">
            <div class="pin">
              <div class="p_left">
                <div class="image">
                  <img
                    src="https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg"
                    alt=""
                  />
                </div>
                <div class="name">
                  <p>告别黎明</p>
                  <span>11-28</span>
                </div>
              </div>
              <div class="p_right">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div class="yue">
              <van-rate v-model="value" :count="5" gutter="2px" size="10px" />
              <span>阅读17小时点评</span>
            </div>
            <div class="content">
              这男主可以，这是我见过的第四个三观比较正性格比较好的了。内容比较休闲，就感觉在养老的那种感觉。这才是真正的咸鱼生活
            </div>
            <div class="Like">
              <div class="zan">
                <span class="iconfont icon-dianzan"></span>
                <span>赞同</span>
                <span>31</span>
              </div>
              <div class="fan">
                <span class="iconfont icon-24gf-thumbsDown"></span>
                <span>反对</span>
              </div>
            </div>
            <div class="reply">
              <p>爱吃时疏炸酱面的陈猿：<span>求另外书名</span></p>
              <p>爱吃时疏炸酱面的陈猿：<span>求另外书名</span></p>
            </div>
          </div>
          <div class="pinglun">
            <div class="pin">
              <div class="p_left">
                <div class="image">
                  <img
                    src="https://www.bbiquge.net/files/article/image/84/84678/84678s.jpg"
                    alt=""
                  />
                </div>
                <div class="name">
                  <p>告别黎明</p>
                  <span>11-28</span>
                </div>
              </div>
              <div class="p_right">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
            <div class="yue">
              <van-rate v-model="value" :count="5" gutter="2px" size="10px" />
              <span>阅读17小时点评</span>
            </div>
            <div class="content">
              这男主可以，这是我见过的第四个三观比较正性格比较好的了。内容比较休闲，就感觉在养老的那种感觉。这才是真正的咸鱼生活
            </div>
            <div class="Like">
              <div class="zan">
                <span class="iconfont icon-dianzan"></span>
                <span>赞同</span>
                <span>31</span>
              </div>
              <div class="fan">
                <span class="iconfont icon-24gf-thumbsDown"></span>
                <span>反对</span>
              </div>
            </div>
            <div class="reply">
              <p>爱吃时疏炸酱面的陈猿：<span>求另外书名</span></p>
              <p>爱吃时疏炸酱面的陈猿：<span>求另外书名</span></p>
            </div>
          </div>
          <div class="recommend">
            <h3>读这本书的人还在读</h3>
            <div class="re_book">
              <div class="bo_img">
                <div class="image">
                  <img
                    src="https://book.img.zhangyue01.com/idc_1/group61/M00/5E/83/CmQUOV90d06EZ5VJAAAAAMiSJF0129796326.jpg?v=AYusGap8&t=CmQUOV90d04"
                  />
                </div>
                <p>九幽天帝</p>
              </div>
              <div class="bo_img">
                <div class="image">
                  <img
                    src="https://book.img.zhangyue01.com/idc_1/group61/M00/5F/80/CmQUOF926lOEDwQLAAAAAOwwgQc115368272.jpg?v=dn4MnFRw&t=CmQUOF926lM"
                    alt=""
                  />
                </div>
                <p>九转星辰变</p>
              </div>
              <div class="bo_img">
                <div class="image">
                  <img
                    src="https://book.img.zhangyue01.com/idc_1/group61/M00/13/08/CmRaIV-ABWWERlSkAAAAAC4BSqc904661245.jpg?v=suBznPtb&t=CmRaIV-ABWU"
                    alt=""
                  />
                </div>
                <p>九劫剑魔</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page_footer">
        <div class="fot_cont">
          <div :class="['icon',data.bookrack ? 'con':'']" @click="bookrackFun" >
            <span class="iconfont icon-shu"></span>
            <p v-show="data.bookrack">已在书库</p>
            <p v-show="!data.bookrack">加入书库</p>
          </div>

          <!-- <button @click="buyFun">{{data.text}}</button> -->
          <button @click="liberFun">{{ data.text }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import "../assets/font-two/iconfont.css";

.page_books {
  width: 100%;
  background: rgba(174, 170, 135, 0.9);

  .top_book {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 16px;
    color: #fff;

    span {
      font-size: 20px;
    }

    .right {
      display: flex;
      align-items: center;

      .font {
        font-size: 13px;
        margin-left: 5px;
      }
    }
  }

  .main_book {
    display: flex;
    padding: 0 18px;
    padding-bottom: 20px;

    .image {
      width: 90px;
      height: 120px;
      overflow: hidden;
      background-color: red;
      border-radius: 8px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title_box {
      margin-left: 12px;

      h3 {
        color: #fff;
        width: 180px;
        font-weight: 600;
        padding-bottom: 15px;
      }

      p {
        font-size: 13px;
        color: #efeedc;
        padding-bottom: 10px;
      }
    }
  }

  .white_box {
    overflow: scroll;
    height: 70vh;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    .score {
      display: flex;
      justify-content: space-around;
      padding-top: 18px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;

      .score_item {
        text-align: center;

        .num {
          font-size: 13px;

          strong {
            font-size: 23px;
            padding: 0 3px;
          }
        }

        p {
          font-size: 13px;
          color: #8d8d8d;
        }
      }
    }

    .books {
      padding: 20px 22px 15px 20px;
      border-bottom: 1px solid #eee;

      h3 {
        font-weight: 600;
        padding-bottom: 10px;
      }

      p {
        font-size: 14px;
        color: #737373;
        line-height: 30px;
        font-family: "微软雅黑";
      }

      .book_item {
        display: flex;
        margin-top: 24px;

        .cont {
          padding: 5px 10px;
          font-size: 12px;
          color: #868686;
          background-color: #f4f4f4;
          border-radius: 20px;
          margin-right: 10px;
        }
      }
    }

    .cata {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 8px solid #f7f7f7;

      h4 {
        font-weight: 600;
      }

      p {
        font-size: 13px;
        color: #9d9d9d;

        span {
          font-family: "仿宋";
          margin-left: 5px;
        }
      }
    }

    .book_review {
      padding: 23px 20px;
      padding-bottom: 60px;

      .review {
        display: flex;
        justify-content: space-between;
        align-items: center;

        h4 {
          font-weight: 600;
        }

        p {
          font-size: 13px;
          color: #9d9d9d;

          span {
            font-family: "仿宋";
            margin-left: 5px;
          }
        }
      }

      .xing {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px;
        background-color: #f7f7f7;
        border-radius: 10px;
        font-size: 14px;
        margin: 15px 0;
      }

      .pinglun {
        margin-top: 20px;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;

        .pin {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .p_left {
            display: flex;

            .image {
              width: 35px;
              height: 35px;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 10px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .name {
              p {
                font-size: 14px;
              }

              span {
                font-size: 10px;
                color: #a5a5a5;
                margin-top: 8px;
              }
            }
          }

          .p_right {
            span {
              display: block;
              width: 3px;
              height: 3px;
              border-radius: 50%;
              margin-bottom: 5px;
              background-color: #9e9e9e;
            }
          }
        }

        .yue {
          margin-top: 10px;

          span {
            font-size: 12px;
            color: #b9b9b9;
            margin-left: 5px;
          }
        }

        .content {
          font-size: 14px;
          line-height: 22px;
          margin-top: 8px;
        }

        .Like {
          display: flex;
          justify-content: flex-end;

          align-items: center;
          color: #a7a7a7;

          span {
            margin-right: 3px;
            font-size: 13px;
          }

          .zan {
            margin-right: 15px;
            display: flex;
            align-items: baseline;
          }

          .fan {
            display: flex;
            align-items: center;
          }

          .iconfont {
            font-size: 16px;
          }
        }

        .reply {
          padding: 10px;
          background-color: #f7f7f7;
          font-size: 13px;
          color: #7f7f7f;
          margin-top: 10px;

          p {
            margin-bottom: 3px;
          }

          span {
            color: #000;
          }
        }
      }

      .recommend {
        padding: 20px 0;

        h3 {
          font-weight: 600;
        }

        .re_book {
          display: flex;
          justify-content: space-between;

          .bo_img {
            width: 92px;
            margin-top: 20px;

            .image {
              width: 92px;
              height: 138px;
              border-radius: 5px;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
              }
            }

            p {
              font-size: 13px;
              font-family: "微软雅黑";
              margin-top: 8px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }

  .page_footer {
    background-color: #fff;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    width: 100%;

    .fot_cont {
      display: flex;
      justify-content: space-between;
      padding: 8px 16px;
      align-items: center;

      .icon {
        text-align: center;
        margin: 0 auto;
        margin-top: 5px;
        color: rgb(169, 160, 160);

        .icon-shu {
          font-size: 20px;
        }
      }
      .icon.con{
        color: #fd7534;
      }
      p {
        font-size: 12px;
        margin-top: 2px;
      }

      button {
        padding: 10px 50px;
        border: none;
        border-radius: 20px;
        color: #fff;
        font-size: 16px;
        background-color: #fd7534;
      }
    }
  }
}
</style>